<template>
  <div>
    <el-row>
      <el-button
        size="mini"
        type="primary"
        style="float: right"
        @click="getBack()"
      >返回
      </el-button
      >
    </el-row>
    <el-row>
      <el-col :span="12">
        <div>
          <e-charts :chartData="chartOptions" :key="chartOptions.series[0].data[0].value.toString()"></e-charts>
        </div>
        <div class="accordion">
          <el-collapse v-model="testCaseGroupName" accordion>
            <el-collapse-item v-for="(testCaseGroup, testCaseGroupIndex) in testCaseGroup" :key="testCaseGroupIndex"
                              :title="`测试用例结果集:${testCaseGroup.testCaseGroupName}`">
              <el-collapse v-model="testCaseGroup.testCaseName" accordion>
                <el-collapse-item v-for="(testCase, testCaseIndex) in testCaseGroup.testResultLists"
                                  :key="testCaseIndex" :title="`测试用例结果：${testCase.testCaseName}`">
                  <div>
                    <el-table
                      :data="testCase.apiRequestResults"
                      :show-header="false"
                      size="mini"
                      @row-click="rowClick"
                    >
                      <el-table-column prop="apiName"></el-table-column>
                      <el-table-column prop="resultIsPass">
                        <template slot-scope="scope">
                          <el-tag
                            :type="scope.row.resultIsPass === false ? 'danger' : 'success'"
                            style="float: right"
                            disable-transitions>{{scope.row.resultIsPass === false ? '失败' : '成功'}}
                          </el-tag>
                        </template>

                      </el-table-column>
                    </el-table>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-col>
      <el-col :span="12">
        <template>
          <el-tabs
            v-model="activeName"
            @tab-click="handleClick"
            style="margin-left: 10px"
            v-show=isApiShow
          >
            <el-tab-pane label="请求信息" name="first">
              <el-row :gutter="2">
                <el-col :span="2">
                  <el-tag size="mini">
                    {{ apiShowData.method }}
                  </el-tag>
                </el-col>
                <el-col :span="22"
                ><span style="font-size: 12px">{{
                apiShowData.url
              }}</span></el-col
                >
              </el-row>
              <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item title="headers" name="1">
                  <div
                    v-for="(item, index) in apiShowData.requestHeader"
                    :key="index"
                  >
                    {{ item.key }} : {{ item.value }}
                  </div>
                </el-collapse-item>
                <el-collapse-item title="params" name="2">
                  <div
                    v-for="(item, index) in apiShowData.requestParams"
                    :key="index"
                  >
                    {{ item.key }} : {{ item.value }}
                  </div>
                </el-collapse-item>
                <el-collapse-item
                  v-if="apiShowData.requestParamType == 'raw'"
                  title="body"
                  name="3"
                >
                  <pre>{{ apiShowData.requestBody }}</pre>
                </el-collapse-item>
                <el-collapse-item
                  v-if="apiShowData.requestParamType == 'form'"
                  title="dataForm"
                  name="3"
                >
                  <div
                    v-for="(item, index) in apiShowData.requestDataParams"
                    :key="index"
                  >
                    {{ item.key }} : {{ item.value }}
                  </div>
                </el-collapse-item>
              </el-collapse>
            </el-tab-pane>
            <el-tab-pane label="响应详情" name="second">
              <el-row :gutter="1">
                <el-col :span="4">
                  <el-tag size="mini"
                  >响应状态码：{{ apiShowData.resultStatus }}
                  </el-tag
                  >
                </el-col>
                <el-col :span="4">
                  <el-tag size="mini"
                  >响应时间为：{{ apiShowData.resultTime }}毫秒
                  </el-tag
                  >
                </el-col>
              </el-row>
              <el-tabs v-model="responseActiveName"
                       @tab-click="handleClick">
                <el-tab-pane label="响应体" name="responseBody">
                  <template>

                    <editor
                      v-model="apiShowData.resultBody"
                      @init="editorInit"
                      lang="json"
                      :options="editorOptions"
                      theme="chrome"
                      width="100%"
                      height="600px"
                    >
                </editor>
                  </template>
                </el-tab-pane>
                <el-tab-pane label="响应头" name="responseHeaders">
                  <pre>
                    <div v-for="(item,index) in apiShowData.responseHeaders"
                         :key="index">{{ item.key }} : {{ item.value }}</div>
                  </pre>
                </el-tab-pane>
              </el-tabs>
            </el-tab-pane>
            <el-tab-pane label="验证结果" name="third">
              <el-divider content-position="left">断言结果</el-divider>
              <el-table
                :data="apiShowData.resultAssert"
                border
                size="mini"
              >
                <el-table-column
                  prop="checkList"
                  label="表达式"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="value"
                  label="预期结果"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="realValue"
                  label="实际结果"
                  align="center"
                ></el-table-column>
                <el-table-column prop="result" label="对比结果" align="center">
                  <template slot-scope="scope">
                    <el-tag size="mini" v-if="scope.row.result == true">
                      成功
                    </el-tag>
                    <el-tag size="mini" v-else type="danger"> 失败</el-tag>
                  </template>
                </el-table-column
                >
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="异常信息" name="fourth">{{ apiShowData.exceptionBody }}</el-tab-pane>
          </el-tabs>
        </template>
      </el-col>
    </el-row>

  </div>
</template>

<script>

  import reportDetail from "./reportDetail";

  export default reportDetail;

</script>

<style scoped>
  @import "reportDetail.css";

</style>
